<template>
  <el-dialog v-model="Store.dialogFormVisible" title="发布公告" width="500">
    <el-table :data="Store.AnnForm" style="width: 100%" height="250">
      <el-table-column fixed property="Area" label="区域名称" />
      <el-table-column property="tel" label="物业电话" />
    </el-table>
    <el-form :model="form">
      <el-form-item label="公告标题">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公告信息">
        <el-input v-model="form.content" autocomplete="off" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="addAnnouncement"> 发送 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue'
import axios from 'axios'
import { useAnnouncementsStore } from '@/stores/announcements.js'
import { claerMap } from '@/hook/MapClear.js'
const { proxy } = getCurrentInstance()
const Store = useAnnouncementsStore()

const form = ref({
  title: '',
  content: ''
})

const addAnnouncement = () => {
  console.log(form.value)
  //获取当前时间
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hours = date.getHours()
  let minutes = date.getMinutes()
  if (minutes < 10) {
    minutes = '0' + minutes
  }
  const dateTime = `${year}-${month}-${day} ${hours}:${minutes}`
  const data = {
    title: form.value.title,
    content: form.value.content,
    timestamp: dateTime
  }
  axios.post('/api/announcements/add', data).then((res) => {
    console.log(res.data)
  })
  Store.dialogFormVisible = false
  Store.AnnForm = []
  Store.source1.clear()
}

const handleCancel = () => {
  Store.dialogFormVisible = false
  Store.AnnForm = []
  Store.source1.clear()
}
watch(
  () => Store.dialogFormVisible,
  (val) => {
    if (!val) {
      Store.source1.clear()
    }
  }
)
</script>

<style scoped></style>
